<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统 - 个人中心</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/user-profile.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <div class="header-container">
            <div class="logo">
                <i class="fa fa-book"></i>
                <span>图书馆座位预约系统</span>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html"><i class="fa fa-tachometer"></i> 首页</a></li>
                    <li><a href="seat-selection.html"><i class="fa fa-th-large"></i> 座位选择</a></li>
                    <li><a href="booking-management.html"><i class="fa fa-calendar"></i> 预约管理</a></li>
                    <li class="active"><a href="user-profile.html"><i class="fa fa-user"></i> 个人中心</a></li>
                </ul>
            </nav>
            <div class="user-info">
                <span class="welcome">欢迎，用户</span>
                <div class="avatar">
                    <i class="fa fa-user-circle"></i>
                </div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <div class="container profile-container">
            <!-- 侧边导航 -->
            <aside class="profile-sidebar">
                <div class="user-card">
                    <div class="profile-avatar">
                        <i class="fa fa-user-circle-o"></i>
                    </div>
                    <h3 class="user-name">张三</h3>
                    <p class="user-id">学号：2021001234</p>
                    <div class="user-stats">
                        <div class="stat-item">
                            <span class="stat-value">42</span>
                            <span class="stat-label">学习时长</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">158</span>
                            <span class="stat-label">积分</span>
                        </div>
                    </div>
                </div>

                <nav class="profile-nav">
                    <ul>
                        <li class="active"><a href="#personal-info"><i class="fa fa-id-card"></i> 个人信息</a></li>
                        <li><a href="#account-settings"><i class="fa fa-cog"></i> 账号设置</a></li>
                        <li><a href="#preferences"><i class="fa fa-sliders"></i> 预约偏好</a></li>
                        <li><a href="#history"><i class="fa fa-history"></i> 使用记录</a></li>
                        <li><a href="#notifications"><i class="fa fa-bell"></i> 消息通知</a></li>
                        <li><a href="#help"><i class="fa fa-question-circle"></i> 帮助与反馈</a></li>
                    </ul>
                </nav>
            </aside>

            <!-- 内容区 -->
            <div class="profile-content">
                <!-- 个人信息 -->
                <section id="personal-info" class="profile-section">
                    <div class="section-header">
                        <h2><i class="fa fa-id-card"></i> 个人信息</h2>
                        <button class="btn btn-primary edit-btn">编辑</button>
                    </div>
                    <div class="section-content">
                        <form class="info-form">
                            <div class="form-row">
                                <div class="form-group">
                                    <label>姓名：</label>
                                    <input type="text" value="张三" disabled>
                                </div>
                                <div class="form-group">
                                    <label>学号：</label>
                                    <input type="text" value="2021001234" disabled>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>学院：</label>
                                    <input type="text" value="计算机学院" disabled>
                                </div>
                                <div class="form-group">
                                    <label>专业：</label>
                                    <input type="text" value="软件工程" disabled>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>手机号：</label>
                                    <input type="tel" value="138****6789" disabled>
                                </div>
                                <div class="form-group">
                                    <label>邮箱：</label>
                                    <input type="email" value="zhangsan@example.com" disabled>
                                </div>
                            </div>
                            <div class="form-group full-width">
                                <label>简介：</label>
                                <textarea disabled>热爱学习的大学生，喜欢在图书馆安静的环境中学习和阅读。</textarea>
                            </div>
                        </form>
                    </div>
                </section>

                <!-- 账号安全 -->
                <section id="account-security" class="profile-section">
                    <div class="section-header">
                        <h2><i class="fa fa-shield"></i> 账号安全</h2>
                    </div>
                    <div class="section-content">
                        <div class="security-items">
                            <div class="security-item">
                                <div class="item-info">
                                    <h3>修改密码</h3>
                                    <p>定期修改密码可以保护您的账号安全</p>
                                </div>
                                <button class="btn btn-secondary">修改</button>
                            </div>
                            <div class="security-item">
                                <div class="item-info">
                                    <h3>绑定手机</h3>
                                    <p>已绑定：138****6789</p>
                                </div>
                                <button class="btn btn-secondary">更换</button>
                            </div>
                            <div class="security-item">
                                <div class="item-info">
                                    <h3>绑定邮箱</h3>
                                    <p>已绑定：zhangsan@example.com</p>
                                </div>
                                <button class="btn btn-secondary">更换</button>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 使用统计 -->
                <section id="usage-stats" class="profile-section">
                    <div class="section-header">
                        <h2><i class="fa fa-bar-chart"></i> 使用统计</h2>
                    </div>
                    <div class="section-content">
                        <div class="stats-cards">
                            <div class="stat-card">
                                <h3>本月预约次数</h3>
                                <p class="stat-value">12</p>
                            </div>
                            <div class="stat-card">
                                <h3>本月学习时长</h3>
                                <p class="stat-value">28 小时</p>
                            </div>
                            <div class="stat-card">
                                <h3>平均每次时长</h3>
                                <p class="stat-value">2.3 小时</p>
                            </div>
                            <div class="stat-card">
                                <h3>最喜欢的区域</h3>
                                <p class="stat-value">主馆3楼</p>
                            </div>
                        </div>

                        <div class="chart-container">
                            <!-- 学习时长趋势图表 -->
                            <h3>学习时长趋势</h3>
                            <div class="chart-placeholder">
                                <i class="fa fa-line-chart"></i>
                                <p>学习时长趋势图表</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2024 图书馆座位预约系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/user-profile.js"></script>
</body>
</html>